<template>
  <el-row class="row">
    <!-- 单条/批量预约 -->
    <appoint-modal hasMemo @refresh="refresh" :rows="passData" :visible.sync="visible" :isEdit="isEdit"></appoint-modal>
    <el-col :span="24">
      <Portlet title="服务预约">

        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNos">
                <el-input v-model="search.orderNos" type="textarea" :rows="4" placeholder="服务订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneName">
                <el-input v-model="search.consigneName" placeholder="客户姓名"></el-input>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="consignePhone">
                <el-input placeholder="客户电话" v-model="search.consignePhone"></el-input>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span>
                    </el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" placeholder="服务类型">
                  <el-option v-for="item in allServices"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwner">
                <el-input v-model="search.cargoOwner" placeholder="商家名称"></el-input>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span>
                    </el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="addressArr">
                <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="收件地址"/>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="appointStart">
                <el-date-picker type="date"
                                placeholder="预约开始时间"
                                v-model="search.appointStart"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="appointEnd">
                <el-date-picker type="date"
                                placeholder="预约结束时间"
                                v-model="search.appointEnd"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="start">
                <el-date-picker type="date"
                                placeholder="下单开始日期"
                                v-model="search.start"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :lg="4" :md="6">
              <el-form-item prop="end">
                <el-date-picker type="date"
                                placeholder="下单结束日期"
                                v-model="search.end"
                                value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-collapse-transition>

            <div v-show="isOpen">

              <el-row :gutter="15">
                <el-col :lg="4" :md="6">
                  <el-form-item prop="collation">
                    <el-select v-model="search.collation" clearable placeholder="排序方式">
                      <el-option label="收件区" value="consigneeArea"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :lg="4" :md="6">
                  <el-form-item prop="founderUserName">
                    <el-input v-model="search.founderUserName" placeholder="导入人"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :lg="4" :md="6">
                  <el-form-item prop="foundStartDate">
                    <el-date-picker type="date"
                                    placeholder="导入开始时间"
                                    v-model="search.foundStartDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :lg="4" :md="6">
                  <el-form-item prop="foundEndDate">
                    <el-date-picker type="date"
                                    placeholder="导入结束时间"
                                    v-model="search.foundEndDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

            </div>

          </el-collapse-transition>
        </el-form>

      </Portlet>
    </el-col>
    <div class="col-xs-12">
      <basic-table
        ref="dataTable"
        url="/ms-terminal-order/appoint/list"
        :columns="columns"
        :tabs="tabs"
      >
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="服务订单号">
            <template slot-scope="scope">
              <a href="javascript: void (0);" @click.prevent="show(scope.row)">
                {{ scope.row.orderNo }}
              </a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="state == 1"
                size="mini"
                type="text"
                @click="showDialog(scope.row)"
              >
                预约
              </el-button>
              <el-button
                size="mini"
                type="text"
                v-if="state == 2"
                @click="showDialog(scope.row, true)"
              >
                改约
              </el-button>
            </template>
          </el-table-column>
        </template>
        <el-button slot="buttons" :disabled="state != 1" @click.prevent="showDialog()" type="warning">批量预约</el-button>
      </basic-table>
    </div>
  </el-row>
</template>
<script>
import AppointModal from '@/views/oms/dispatch/distributionOrder/NewAppointModal'
import {copy, dotData, alert} from '@/utils'
import {unixTimestampFilter} from '@/filters'
import {getServiceType} from '@/utils/selectOptions'
export default {
  name: 'dispatchDistributionOrderIndex',
  components: {
    AppointModal
  },
  filters: {
    unixTimestampFilter
  },
  data() {
    let columns = [
      {
        label: '下单日期',
        data: 'placeDate',
        width: '160',
        render(data, full) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '商家名称',
        data: 'cargoOwner'
      },
      {
        label: '产品总数',
        data: 'productNum'
      },
      {
        label: '总包件',
        data: 'totalPackage'
      },
      {
        label: '总体积(m³)',
        data: 'totalVolume'
      },
      {
        label: '总重量(kg)',
        data: 'totalWeight'
      },
      {
        label: '客户姓名',
        data: 'consigneName'
      },
      {
        label: '客户电话',
        data: 'consignePhone'
      },
      {
        label: '客户地址',
        data: 'consigneProvince+consigneCity+consigneDistrict',
        render(data, full) {
          return `${full.consigneProvince} ${full.consigneCity} ${full.consigneDistrict}`
        }
      },
      {label: '详细地址', data: 'consigneAddress'}
    ]
    let firstColumns = copy(columns, true)
    firstColumns.splice(0, 0, {
      label: '服务类型',
      data: 'service'
    })
    let seColumns = copy(columns, true)
    seColumns.splice(1, 0, {
      label: '服务类型',
      data: 'service'
    })
    seColumns.splice(3, 0, {
      label: '预约时间',
      data: 'appointTime',
      width: '160',
      render(data, full) {
        return unixTimestampFilter(data, 'YYYY-MM-DD') + ' ' + full.timeInterval
      }
    })
    return {
      visible: false,
      passData: [], // 传递的整体数据
      state: 1,
      isEdit: false, // 改约 modal
      searchLoading: false,
      search: {
        collation: '',
        orderNos: '',
        serviceNo: '',
        consigneName: '',
        consignePhone: '',
        cargoOwner: '',
        addressArr: [],
        appointStart: '',
        appointEnd: '',
        end: '',
        start: ''
      },
      serviceTypes: [],
      addedServices: [],
      isOpen: false,
      columns: columns,
      tabs: [
        {
          label: '待预约',
          url: '/ms-terminal-order/appoint/list',
          columns: firstColumns,
          callback: (params) => {
            params.appointStart = ''
            params.appointEnd = ''
            params.serviceNo = ''
            this.search.appointStart = ''
            this.search.appointEnd = ''
            this.search.serviceNo = ''
            this.search.collation = ''
            params.collation = ''
            this.state = 1
          }
        },
        {
          label: '已预约',
          url: '/ms-terminal-order/appoint/list-already',
          columns: seColumns,
          callback: (params) => {
            params.serviceNo = ''
            this.search.serviceNo = ''
            this.search.collation = ''
            params.collation = ''
            this.state = 2
          }
        }
      ]
    }
  },
  created() {
    // 模拟下拉框选项
    getServiceType().then(arr => {
      this.serviceTypes = arr
    })
  },
  computed: {
    allServices() {
      return this.serviceTypes
    }
  },
  methods: {
    // 弹出 预约modal
    showDialog(currentData, isEdit = false) {
      this.isEdit = isEdit
      if (currentData) {
        this.passData = [currentData]
      } else {
        this.passData = this.$refs.dataTable.getSelected() || []
      }
      if (this.passData.length === 0) {
        alert('请选择订单')
        return
      }
      this.visible = true
    },
    searchFunc(search) {
      let data = copy(search, true)
      // 处理地址
      data.consigneProvinceNo = dotData(data.addressArr, '[0]') || ''
      data.consigneCityNo = dotData(data.addressArr, '[1]') || ''
      data.consigneDistrictNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.searchLoading = true
      this.$refs.dataTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    // reset 重置搜索框
    resetFields(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    refresh() {
      this.searchFunc(this.search)
    },
    // 弹出 改约modal
    showModifyDialog(data) {
      this.overDate = data.checktime // 已预约的年月日
      // this.overTime = data.checktime // 已预约的时段
      this.modifyId = data.id
      this.modifyDialogOpen = true
      if (this.$refs.modifyForm) {
        this.$refs.modifyForm.resetField()
      }
    },
    // 跳转详情
    show(data) {
      this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
    }
  }
}
</script>
